<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--    <link rel="stylesheet" href="https://www.kugou.com/yy/static/css/play.css?201505211743">-->
    <link rel="stylesheet" href="css/kugou.css">
    <!--    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/player_0611.css?max_age=2592000&v=20190611" />-->
    <link rel="stylesheet" href="css/qqmusic.css">
    <title>Title</title>

</head>

<body>

    <div class="mod_player" id="player">

        <!--搜索框-->
        <div class="player__top">
            <div class="search_input">
                <input class="search_input" type="text" placeholder="搜索音乐" v-model="query" @keyup.enter="searchMusic">
                <div class="searh_btn"><i class="search_icon"></i><span>搜索</span></div>
            </div>

            <div class="mod_songlist_toolbar">
                <a href="javascript:;" class="mod_btn js_all_down" data-stat="y_new.player.songlist.downloadall"><i
                        class="mod_btn_green__icon_down"></i>下载<span class="mod_btn__border"></span></a>

            </div>
        </div>
        <div class="player__bd">
            <!-- 默认 -->
            <div class="player_style_normal js_box js_full_box" style="display:;">

                <div class="sb_scrollable sb_main sb_viewport">

                    <!-- 主要内容_S -->
                    <div class="sb_overview" style="height: 500px;">

                        <!-- 编辑模式 mod_songlist--edit -->
                        <div class="mod_songlist mod_songlist--edit">
                            <i class="player_songlist__line"></i>
                            <ul class="songlist__header">
                                <li class="songlist__edit sprite">
                                    <input type="checkbox" class="songlist__checkbox js_check_all"
                                        data-stat="y_new.player.songlist.checkall">
                                </li>
                                <li class="songlist__header_name">歌曲</li>
                                <li class="songlist__header_author">歌手</li>
                                <li class="songlist__header_time">时长</li>
                            </ul>
                            <i class="player_songlist__line"></i>
                            <ul class="songlist__list" id="song_box">
                                <li v-for="(item,index) in musicList" mid="237958907" ix="0" data-page="player"
                                    data-stat="y_new.player.songlist.dbclick">
                                    <div
                                        :class="isPlaying && index == controlItem? 'songlist__item songlist__item--playing':'songlist__item'">
                                        <div class="songlist__edit sprite">
                                            <input type="checkbox" class="songlist__checkbox">
                                        </div>
                                        <div class="songlist__number">{{index+1}}</div>
                                        <div class="songlist__songname">
                                            <span class="songlist__songname_txt" title="木偶人">{{item.name}}</span>
                                            <div class="mod_list_menu">
                                                <a href="javascript:;" @click="playMusic(item.id, index)"
                                                    class="list_menu__item list_menu__play js_play"
                                                    data-stat="y_new.player.songlist.playone" data-page="player"
                                                    title="播放"><i
                                                        :class="isPlaying && index == controlItem?'list_menu__icon_pause':'list_menu__icon_play'"></i><span
                                                        class="icon_txt">播放</span></a>
                                                <a href="javascript:;" class="list_menu__item list_menu__add js_fav"
                                                    data-stat="y_new.player.songlist.addone" title="添加到歌单"
                                                    aria-haspopup="true">
                                                    <i class="list_menu__icon_add"></i>
                                                    <span class="icon_txt">添加到歌单</span>
                                                </a>

                                                <a href="javascript:;" class="list_menu__item list_menu__down js_down"
                                                    title="下载" aria-haspopup="true" data-target="menu_down">
                                                    <i class="list_menu__icon_down"></i>
                                                    <span class="icon_txt">下载</span>
                                                </a>

                                                <a href="javascript:;" class="list_menu__item list_menu__share js_share"
                                                    data-stat="y_new.player.songlist.shareone" title="分享"
                                                    aria-haspopup="true">
                                                    <i class="list_menu__icon_share"></i>
                                                    <span class="icon_txt">分享</span>
                                                </a>
                                            </div>
                                        </div>

                                        <div class="songlist__artist" title="薛之谦">


                                            <a href="https://y.qq.com/n/yqq/singer/002J4UUk29y8BY.html"
                                                data-singermid="002J4UUk29y8BY" data-singerid="5062" title="薛之谦"
                                                data-stat="y_new.player.songlist.singername" class="singer_name"
                                                data-page="player">{{item.artists[0].name}}</a>

                                        </div>
                                        <div class="songlist__time">{{transtime(item.duration)}}</div>
                                        <div class="songlist__other">

                                        </div>
                                        <a href="javascript:;" class="songlist__delete js_delete" data-page="player"
                                            data-stat="y_new.player.songlist.delete" title="删除"><span
                                                class="icon_txt">删除</span></a>
                                        <i class="player_songlist__line"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 主要内容_E -->
                    <!-- 模拟滚动条 S -->
                    <div class="scroll_area sb vertical" style="display:none;">
                        <div class="scroll_bg sb_bg">
                            <div class="scroll_bg_cont sb_bg_cont"></div>
                        </div>
                        <div class="scroll_bar sb_thumb" style="height:0px;">
                            <div class="scroll_bar_cont sb_thumb_cont" style="height:0px;"></div>
                        </div>
                    </div>
                    <!-- 模拟滚动条 E -->
                </div>

                <div class="mod_song_info" id="song_info">
                    <div class="song_info__info">
                        <a href="javascirpt:;" class="song_info__cover js_album"
                            data-stat="y_new.player.info_area.albumpic">
                            <img :src="musicCover" id="song_pic" alt="" class="song_info__pic">
                        </a>
                        <div class="song_info__name" id="song_name">歌曲名：<a
                                href="https://y.qq.com/n/yqq/song/0013gno33tCvYn.html#stat=y_new.player.info_area.songname"
                                onclick="setStatCookie&amp;&amp;setStatCookie();" title="木偶人"
                                target="_blank">{{musicName}}</a>
                        </div>
                        <div class="song_info__singer" id="singer_name">歌手名：<a
                                href="https://y.qq.com/n/yqq/singer/002J4UUk29y8BY.html#stat=y_new.player.info_area.singername"
                                onclick="setStatCookie&amp;&amp;setStatCookie();" title="薛之谦" class="js_singer"
                                data-stat="y_new.player.info_area.singername" data-singermid="002J4UUk29y8BY"
                                rel="noopener nofollow" target="_blank">{{musicSinger}}</a></div>
                        <div class="song_info__album" id="album_name">专辑名：<a
                                href="https://y.qq.com/n/yqq/album/002fbejG1DClXD.html#stat=y_new.player.info_area.albumname"
                                onclick="setStatCookie&amp;&amp;setStatCookie();" title="音浪合伙人 第1期"
                                target="_blank">音浪合伙人 第1期</a></div>
                    </div>
                    <div class="song_info__lyric">
                        <div class="song_info__lyric_box js_lyric_box">
                            <!-- 控制song_info__lyric_inner来做滚动 -->
                            <div class="song_info__lyric_inner qrc_ctn" id="qrc_ctn" data-mod="1"
                                style="transition: -webkit-transform 0.1s ease-out 0s; transform: translateY(-763.8px);">
                                <p data-id="line_null">&nbsp;</p>
                                <p data-id="line_0" class="">木偶人 (Live) - 薛之谦</p>
                                <p data-id="line_1" class="">词：薛之谦</p>
                                <p data-id="line_2">曲：薛之谦</p>
                                <p data-id="line_3" class="">编曲：陈迪</p>
                                <p data-id="line_4" class="">听专情的古人</p>
                                <p data-id="line_5" class="">把美言留给最爱的人</p>
                                <p data-id="line_6" class="">看裹小脚的人</p>
                                <p data-id="line_7" class="">为诗人的恶习在隐忍</p>
                                <p data-id="line_8" class="">你没读懂课本</p>
                                <p data-id="line_9" class="">可世人硬要捧</p>
                                <p data-id="line_10" class="">看感情里的人</p>
                                <p data-id="line_11" class="">用肉眼分出三六九等</p>
                                <p data-id="line_12" class="">再配合些掌声</p>
                                <p data-id="line_13" class="">看上去全都忠心耿耿</p>
                                <p data-id="line_14" class="">谁定的烂台本</p>
                                <p data-id="line_15" class="">可当代都在跟气氛已麻木不仁</p>
                                <p data-id="line_16" class="">所以 当我们都变成木偶人</p>
                                <p data-id="line_17" class="">你何苦再做一个痴情人表忠贞</p>
                                <p data-id="line_18" class="">文字叙述工整 重复廉价伤痕</p>
                                <p data-id="line_19" class="">你还会哭多感人</p>
                                <p data-id="line_20" class="">让我们都变成木偶人</p>
                                <p data-id="line_21" class="">再缝几针爱几次后就不会疼</p>
                                <p data-id="line_22" class="">去除惦记功能</p>
                                <p data-id="line_23" class="on">再遇到你时像个陌生人</p>
                                <p data-id="line_24">没有人能变成木偶人</p>
                                <p data-id="line_25">无非是在感情里的逃避过程</p>
                                <p data-id="line_26">我们盛气凌人 掩饰无权过问</p>
                                <p data-id="line_27">遇见谁要拆几针</p>
                                <p data-id="line_28">当我们都羡慕木偶人</p>
                                <p data-id="line_29">学会他在场面上的玩弄过程</p>
                                <p data-id="line_30">美化措辞追捧</p>
                                <p data-id="line_31">似拟人的掌声是我爱人</p>
                                <p data-id="line_32">防备厚厚一本</p>
                                <p data-id="line_33">是我献出自己的后遗症</p>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" class="btn_lang btn_lang--select js_trans_btn" style="display:none;"><i
                            class="icon_txt">开启音译歌词</i></a>
                </div>
            </div>

            <!-- 纯净模式 -->
            <div class="player_style_only js_box js_simp_box" style="display:none;">
                <div class="mod_only_lyric js_lyric_box">
                    <!-- 控制only_lyric__inner来做滚动 -->
                    <div class="only_lyric__inner qrc_ctn" data-mod="2">
                        <p data-id="line_null">&nbsp;</p>
                        <p data-id="line_0">木偶人 (Live) - 薛之谦</p>
                        <p data-id="line_1">词：薛之谦</p>
                        <p data-id="line_2">曲：薛之谦</p>
                        <p data-id="line_3">编曲：陈迪</p>
                        <p data-id="line_4">听专情的古人</p>
                        <p data-id="line_5">把美言留给最爱的人</p>
                        <p data-id="line_6">看裹小脚的人</p>
                        <p data-id="line_7">为诗人的恶习在隐忍</p>
                        <p data-id="line_8">你没读懂课本</p>
                        <p data-id="line_9">可世人硬要捧</p>
                        <p data-id="line_10">看感情里的人</p>
                        <p data-id="line_11">用肉眼分出三六九等</p>
                        <p data-id="line_12">再配合些掌声</p>
                        <p data-id="line_13">看上去全都忠心耿耿</p>
                        <p data-id="line_14">谁定的烂台本</p>
                        <p data-id="line_15">可当代都在跟气氛已麻木不仁</p>
                        <p data-id="line_16">所以 当我们都变成木偶人</p>
                        <p data-id="line_17">你何苦再做一个痴情人表忠贞</p>
                        <p data-id="line_18">文字叙述工整 重复廉价伤痕</p>
                        <p data-id="line_19">你还会哭多感人</p>
                        <p data-id="line_20">让我们都变成木偶人</p>
                        <p data-id="line_21">再缝几针爱几次后就不会疼</p>
                        <p data-id="line_22">去除惦记功能</p>
                        <p data-id="line_23">再遇到你时像个陌生人</p>
                        <p data-id="line_24">没有人能变成木偶人</p>
                        <p data-id="line_25">无非是在感情里的逃避过程</p>
                        <p data-id="line_26">我们盛气凌人 掩饰无权过问</p>
                        <p data-id="line_27">遇见谁要拆几针</p>
                        <p data-id="line_28">当我们都羡慕木偶人</p>
                        <p data-id="line_29">学会他在场面上的玩弄过程</p>
                        <p data-id="line_30">美化措辞追捧</p>
                        <p data-id="line_31">似拟人的掌声是我爱人</p>
                        <p data-id="line_32">防备厚厚一本</p>
                        <p data-id="line_33">是我献出自己的后遗症</p>
                    </div>
                </div>
                <a href="javascript:;" class="btn_lang btn_lang--select js_trans_btn" style="display:none;"><i
                        class="icon_txt">开启音译歌词</i></a>
            </div>
        </div>

        <audio class="music" id="audio" :src="musicUrl" preload="auto">

        </audio>
        <!-- 播放条 -->
        <div class="audio-module playerbg" id="audioModule">
            <div class="module-bg"></div>
            <div class="player-module">
                <!--  模块左部分：上一首，播放，暂停，下一首  -->
                <div class="controls-left">
                    <a class="icon icon-playbar-prev" id="prev"></a>
                    <a :class="isPlaying ? 'icon icon-playbar-pause':'icon icon-playbar-play'" id="toggle"
                        @click="control()"></a>
                    <a class="icon icon-playbar-next" id="next"></a>
                </div>
                <!-- 专辑封面  -->
                <div class="bar-albumImg"><a target="_blank" href="https://www.kugou.com/album/32187201.html" title="">
                        <img :src="musicCover"></a></div>
                <!-- 模块中间部分：容器  -->
                <div class="controls-bar">
                    <!-- 模块中间部分：上半部分：歌曲信息 -->
                    <div class="song-info">
                        <!-- 歌曲名 -->
                        <div class="like-song">
                            <div class="controls-songName" title="">
                                <span class="songName"
                                    id="songName">{{musicList[controlItem]!=null?"&nbsp;"+musicList[controlItem].name:"&nbsp;"}}</span>
                            </div>
                            <pre class="songName" id="songNameTemp" title=" 世间美好与你环环相扣" style="">&nbsp;世间美好与你环环相扣</pre>
                        </div>
                        <!-- 时长 -->
                        <div class="coding-duration">
                            <span class="duration ie8" id="duration"><i class="change-time">{{musicCurrentTime}}</i> /
                                <i class="all-time">{{musicDuration}}</i></span>
                        </div>
                    </div>
                    <!-- 模块中间部分：下半部分：播放控制条容器 -->
                    <div class="bar" id="bar">
                        <!-- 播放进度背景（自适应） -->
                        <div class="bg" id="progress_bg">
                            <span class="icon icon-playbar-bgleft" id="bg_left"></span>
                            <span class="bg-middle barBG" id="bg_middle"></span>
                            <span class="icon icon-playbar-bgright" id="bg_right"></span>
                        </div>
                        <!-- 播放进度条（自适应） -->
                        <div class="progress-bar" id="progress_bar">
                            <span class="icon icon-playbar-progressleft" id="progress_left"></span>
                            <div class="progress-middle" id="progress_middle">
                                <span class="progress barProgress" id="progress" style="width: 0%;"></span>
                            </div>
                        </div>
                        <!-- 播放定位头（自适应） -->
                        <div class="drag-playhead" id="drag_playhead">
                            <span class="icon icon-playbar-playhead" id="playhead" style="margin-left: 0%;"></span>
                        </div>
                    </div>
                </div>
                <!-- 模块右部分：容器 -->
                <div class="controls-right">
                    <!-- 模块右部分： 音量控制面板 -->
                    <div class="mode-volume-list">
                        <!-- 音量开关控制按钮 -->
                        <div class="volume-icon" id="volume">
                            <span class="icon icon-playbar-maxvox" id="volume_icon"></span>
                        </div>
                        <!-- 音量控制面板 -->
                        <div class="volume-panel" id="volume_panel">
                            <div class="volume-control" id="volume_control">
                                <span class="icon icon-playbar-progressbottom" id="volume_bottom"></span>
                                <div class="volume-bar" id="volume_bar">
                                    <span class="volume-progress volumeProgress" id="volume_progress"
                                        style="top: 32px;"></span>
                                </div>
                                <div class="volume-head" id="volume_head">
                                    <span class="icon icon-playbar-volumehead" id="volumehead"
                                        style="top: 33.2px;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="play_tips" style="display: block; opacity: 0;">已添加到播放列表</div>
                        <!-- 播放模式 -->
                        <a class="icon icon-playbar-cycle" id="mode"></a>
                        <div class="mode-panel" id="mode_panel">
                            <ul>
                                <li>
                                    <a class="loop mode-selected" id="loop" href="javascript:;" hidefocus="true">
                                        <span class="icon icon-playbar-cycle active" id="loop_icon"></span>
                                        <span class="loop-name" id="loop_name">列表循环</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="single " id="single" href="javascript:;" hidefocus="true">
                                        <span class="icon  icon-playbar-singlecycle " id="single_icon"></span>
                                        <span class="single-name" id="single_name">单曲循环</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="random" id="random" href="javascript:;" hidefocus="true">
                                        <span class="icon icon-playbar-randomcycle" id="random_icon"></span>
                                        <span class="random-name" id="random_name">随机播放</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- 下载 -->
                        <a href="javascript:;" class="icon icon-playbar-download" id="pb_download"
                            onclick="_hmt.push(['_trackEvent', 'song2software', 'song2download', 'song2kugou']);"></a>
                        <!-- 分享 -->
                        <a href="javascript:;"
                            onclick="_hmt.push(['_trackEvent', 'songshare', 'shareclick', 'sharekugou']);"
                            class="icon icon-playbar-share" id="pb_share"></a>

                        <a class="icon list" id="list" href="javascript:;" hidefocus="true">
                            <span class="list-count" id="list_count">1</span>
                        </a>
                    </div>
                </div>
                <div class="mod-playlist" id="mod-playlist" data-hide="true">
                    <div class="song-box">
                        <div class="box-header">
                            <div class="title">播放队列/<span>1</span></div>
                            <div class="action-box fr">
                                <span class="icon list-menu-icon-del clear" title="清空"></span>
                                <span class="line"></span>
                                <span class="icon list-menu-icon-close closePlayList" title="关闭播放队列"></span>
                            </div>
                        </div>
                        <div id="musicbox" class="musicbox ">
                            <div class="songjsAction" style="overflow: hidden; padding: 0px; width: 470px;">

                                <div class="jspContainer" style="width: 470px; height: 360px;">
                                    <div class="jspPane" style="top: 0px; left: 0px; width: 470px;">
                                        <div class="musiclist">
                                            <li class="active">
                                                <div class="musiclist-item clearfix"><span
                                                        class="musiclist-number">1</span>
                                                    <div class="musiclist-name"><span class="musiclist-songname-txt"
                                                            title=" 世间美好与你环环相扣"> 世间美好与你环环相扣</span>
                                                        <div class="mod-list-menu"><a href="javascript:;"
                                                                class="icon list-menu-item icon-playbar-download list-action-down"
                                                                title="下载"><i class="icon list-menu-icon-down"></i><span
                                                                    class="icon_txt">下载</span></a><a href="javascript:;"
                                                                class="icon list-menu-item icon-playbar-share list-action-share"
                                                                title="分享"><i
                                                                    class="icon list-menn-icon-share"></i><span
                                                                    class="icon_txt">分享</span></a><a href="javascript:;"
                                                                class="icon list-menu-item list-menu-icon-del list-action-del"
                                                                title="删除歌曲"><i
                                                                    class="icon list-menu-icon-add"></i><span
                                                                    class="icon_txt">删除</span></a></div>
                                                    </div>
                                                    <div class="musiclist-artist" title="唐一">唐一</div>
                                                    <div class="musiclist-time">00:00</div>
                                                </div>
                                            </li>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="showHide-playbar">
                <span class="showHide-bg"></span>
                <span class="icon show-playbar-btn" id="showHide_playbar"></span>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="js/main.js"></script>
</body>

</html>